<template>
  <div class="bg-con">
    <div class="mail">通知</div>
    <div class="avatar">
      <el-dropdown>
        <span class="el-dropdown-link avatar-con">
          <img src="../../assets/img/logo1.png" />
          <span>用户名</span>
          <i
            class="el-icon-arrow-down el-icon--right"
            style="margin: 10px -5px"
          ></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">用户名</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus"
            >切换账号</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-circle-plus-outline"
            >详细信息</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-check">设置</el-dropdown-item>
          <el-dropdown-item @click.native="exit" icon="el-icon-circle-check"
            >注销</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "BigdataindustryWebAvatar",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    exit() {
      this.$confirm("你是否要退出登录?", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
            this.$router.push("/login");
            //删除session里的token值
            window.sessionStorage.removeItem("token");
            window.location.reload();
          }, 500);
        })
        .catch((err) => err);
    },
  },
};
</script>

<style lang="scss" scoped>
.bg-con {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 0 40px;
  background-color: #1a202c;
  .mail {
    padding: 0 40px;
    color: #fff;
  }
}

.avatar {
  width: 100px;
  height: 50px;
  // background: aliceblue;
  border-radius: 40%;
  opacity: 1;
  position: relative;
}
.avatar-con {
  // background-color: #000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: right;
  img {
    width: 100%;
    border-radius: 50%;
    height: 100%;
    display: block;
    background-color: #000;
    // position: absolute;

  }
  span {
    position: absolute;
    margin: 0 50px;
    color: #fff;
  }
}
</style>